<template>
    <div class="wrapper">
        <v-head></v-head>
        <el-container style="color: #fff">
            <el-header> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在本扩展实验中，。。。。。。。</el-header>
            <el-main>
                <div v-show="!showCode" class="car-optimal-solver-content">
                    <div class="left-block">
                        <div class="left-top-block">
                            <div class="left-table">
                                <el-form label-width="210px" :model="oneForm">
                                    <el-form-item label="有序充电电动车数量">
                                        <el-input v-model.number="oneForm.N_oneway" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="有序充电电动车电池容量">
                                        <el-input v-model.number="oneForm.E_oneway" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="有序充电电动车充电最大功率">
                                        <el-input v-model.number="oneForm.P_oneway" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="有序充电开始时间">
                                        <el-input v-model.number="oneForm.T_oneway_st" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="有序充电停止时间">
                                        <el-input v-model.number="oneForm.T_oneway_ed" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="有序充电电动车到站电量">
                                        <el-input v-model.number="oneForm.Oneway_ini_SOC" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="有序充电电动车离站电量">
                                        <el-input v-model.number="oneForm.Oneway_lea_SOC" type="text"></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="left-table">
                                <el-form label-width="210px" :model="twoForm">
                                    <el-form-item label="V2G电动车数量">
                                        <el-input v-model.number="twoForm.N_twoway" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="V2G电动车电池容量">
                                        <el-input v-model.number="twoForm.E_twoway" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="V2G电动车充电最大功率">
                                        <el-input v-model.number="twoForm.P_twoway" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="V2G开始时间">
                                        <el-input v-model.number="twoForm.T_twoway_st" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="V2G停止时间">
                                        <el-input v-model.number="twoForm.T_twoway_ed" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="V2G电动车到站电量">
                                        <el-input v-model.number="twoForm.Twoway_ini_SOC" type="text"></el-input>
                                    </el-form-item>
                                    <el-form-item label="V2G电动车离站电量">
                                        <el-input v-model.number="twoForm.Twoway_lea_SOC" type="text"></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div class="left-bottom-block">
                            <el-button id="button-back" size="small" @click="goBack">返回上一层</el-button>
                            <el-button id="button-source-code" size="small" @click="showCode = !showCode">查看代码</el-button>
                            <el-button id="button-run" size="small" @click="runModel">运行</el-button>
                        </div>
                    </div>
                    <div class="right-block">
                        <div class="charts" id="charts"></div>
                    </div>
                </div>
                <div class="code-area" v-show="showCode">
                    <div class="code-wrapper">
                        <highlightjs class="highlightjs" autodetect :code="code" language="python" />
                    </div>
                    <div class="code-close" @click="showCode = false"></div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import vHead from './Header.vue';
import code from '../../assets/code/warehouse_scheduling.js';
import 'highlight.js/styles/vs2015.css';
import echarts from 'echarts';

export default {
    components: {
        vHead
    },
    data() {
        return {
            code: code,
            showCode: false,
            oneForm: {
                N_oneway: 10,
                E_oneway: 20,
                P_oneway: 10,
                T_oneway_st: 3,
                T_oneway_ed: 13,
                Oneway_ini_SOC: 0.1,
                Oneway_lea_SOC: 0.8
            },
            twoForm: {
                N_twoway: 10,
                E_twoway: 20,
                P_twoway: 12,
                T_twoway_st: 3,
                T_twoway_ed: 13,
                Twoway_ini_SOC: 0.1,
                Twoway_lea_SOC: 0.8
            },
            data: []
        };
    },
    mounted() {
        this.runModel();
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        runModel() {
            let data = { ...this.oneForm, ...this.twoForm };
            this.$axios
                .post('http://1.119.155.116:8081/api/CarOptimalSovler', data)
                .then((response) => {
                    if (response.data.code === 0) {
                        this.changeCharts(response.data.data);
                    } else {
                        this.$message.error(response.data.message);
                    }
                })
                .catch((error) => {
                    this.$message.error('网络请求失败');
                });
        },
        changeCharts(data) {
            console.log(data);
            let charts = echarts.init(document.getElementById('charts'));
            let option = {
                title: {
                    text: ''
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: { color: '#6098d4', width: 2 }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: { color: '#6098d4', width: 2 }
                    },
                    axisLine: {
                        lineStyle: { color: '#6098d4', width: 2 }
                    }
                },
                series: []
            };

            if (data.length > 0) {
                data.forEach((item) => {
                    option.series.push({
                        type: 'line',
                        symbol: 'none',
                        lineStyle: { color: '#6098d4', width: 2 },
                        data: item
                    });
                });
            }

            charts.setOption(option);
        }
    }
};
</script>
<style lang="less" scoped="scoped">
body .wrapper {
    background-image: url(../../assets/img/background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.el-header {
    margin: 50px auto 0 auto;
    width: 90%;
    color: #00ffff;
    line-height: 50px;
    font-size: 22px;
    height: 50px !important;
    background-image: url(../../assets/img/carExper/content.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.el-container {
    width: 100%;
    height: 92%;
    background: url('../../assets/img/metroExper/motro_exper_bg.png') no-repeat center center/90% auto,
        url(../../assets/img/carExper/background.png) no-repeat center/99% 100%;
    margin-left: 15px;
    position: relative;
}

.left-bottom-block {
    margin-top: 46px;

    #button-back {
        margin-right: 100px;
    }

    .el-button.el-button--default.el-button--small,
    .el-button.el-button--primary.el-button--small {
        width: 116px;
        height: 31px;
        background-image: url(../../assets/img/button_blue.png);
        background-size: 100% 100%;
        border: none;
        color: rgb(178, 235, 248);
        background-color: transparent;
    }

    .el-button.el-button--default.el-button--small:hover,
    .el-button.el-button--primary.el-button--small:hover {
        background-image: url(../../assets/img/button_red.png);
    }
}

.el-main {
    padding: 0;
    margin: 20px 50px 35px 35px;
}

.code-area {
    height: calc(100% - 44px);
    width: calc(80% - 44px);
    border: 2px solid #29619c;
    margin: 0 auto;
    padding: 20px;
    background: rgba(4, 7, 34, 0.5);
    box-shadow: inset 0 0 20px #29619c;
    position: relative;

    .code-wrapper {
        height: 100%;
        width: 100%;
        overflow: auto;
    }

    .code-close {
        width: 24px;
        height: 24px;
        border: 1px solid #29619c;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;

        &:hover {
            box-shadow: 0 0 10px #29619c;
        }

        &:before,
        &:after {
            content: '';
            display: block;
            width: 2px;
            height: 24px;
            background: #b2ebf8;
            position: absolute;
            top: 0;
            right: 11px;
            transform: rotate(45deg);
        }

        &:after {
            transform: rotate(-45deg);
        }
    }

    /deep/ .hljs {
        background: transparent;
    }
}

.car-optimal-solver-content {
    min-height: 100%;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .left-block {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;

        .left-top-block {
            display: flex;
            padding-top: 50px;

            .left-table {
                width: 314px;
                height: 314px;
                background: url('../../assets/img/car_optimal_solver_left_bg.png') no-repeat center/100% 100%;

                & + .left-table {
                    margin-left: 46px;
                }

                .el-form {
                    width: 290px;
                    height: 280px;
                    margin-top: 17px;
                    margin-left: 16px;
                    border-collapse: collapse;
                    border-spacing: 0;
                }

                .el-form-item {
                    margin: 0;
                    margin-bottom: 1px;
                }

                /deep/ .el-form-item__label {
                    font-size: 14px;
                    color: #73fbfd;
                    text-align: left;
                    line-height: 39px;
                    padding-left: 10px;
                }

                .el-input {
                    line-height: 39px;
                }

                /deep/ .el-input__inner {
                    border: none;
                    border-radius: 0;
                    color: #73fbfd;
                    background: transparent;
                    font-size: 16px;
                }
            }
        }
    }

    .right-block {
        width: 560px;
        display: flex;
        align-items: center;

        .charts {
            width: 560px;
            height: 560px;
            position: relative;

            &:before {
                content: '';
                position: absolute;
                bottom: 59px;
                left: 54px;
                background: linear-gradient(rgba(107, 218, 251, 0), rgba(107, 218, 251, 0.3));
                width: 450px;
                height: 440px;
                display: block;
            }
        }
    }
}
</style>
